<template>
  <el-dialog
    :visible="visible"
    :title="title"
    class="login-detail-dialog"
    align-center
    @opened="handleDialogOpen"
    @close="closeDialog"
  >
    <div class="content">
      <div class="table-content">
        <el-table :data="tableData" style="width: 100%" height="560">
          <el-table-column
            label="用户名称"
            prop="userName"
            show-overflow-tooltip
          />
          <el-table-column label="用户手机号码" width="120" prop="userPhone" />
          <el-table-column prop="deptName" label="用户所属部门" />
          <el-table-column label="ip" prop="requestIp" width="120" />
          <el-table-column
            prop="loginTime"
            label="访问时间"
            show-overflow-tooltip
          >
            <template #default="scope">
              {{
                scope.row.loginTime
                  ? formatDate(
                      new Date(scope.row.loginTime),
                      'YYYY-MM-DD HH:mm:ss'
                    )
                  : ''
              }}
            </template>
          </el-table-column>
          <el-table-column prop="result" label="登录状态" show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        background
        layout="slot, prev, pager, next"
        :page-size="formInline.pageSize"
        :current-page="formInline.pageIndex"
        :total="total"
        @current-change="handlePageChange"
      >
        <template #default> 共{{ total }}条记录 </template>
      </el-pagination>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { queryLoginLog } from '@/api/back-management/login-log'
import { formatDate } from '@/utils'

const formInline = reactive({
  userId: '',
  pageSize: 13,
  pageIndex: 1,
})

const tableData = ref([])

const total = ref(0)

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  userInfo: {
    type: Object,
    default: () => {},
  },
})

const title = ref('登录详情')

const emit = defineEmits(['closeDialog'])

const closeDialog = () => {
  emit('closeDialog')
}
const handlePageChange = (index: number) => {
  formInline.pageIndex = index
  getLog()
}

const getLog = () => {
  queryLoginLog(formInline).then((res) => {
    if (res.success) {
      const { data } = res
      tableData.value = data.list
      total.value = data.count
    }
  })
}
const handleDialogOpen = () => {
  if (props.userInfo) {
    const { pkid } = props.userInfo
    if (formInline.userId !== pkid) {
      formInline.userId = pkid
      getLog()
    }
  }
}
</script>

<style lang="scss">
.login-detail-dialog {
  //width: 962px;
  //height: 723px;
  //background: #ffffff;
  border-radius: 4px;

  .el-dialog__header {
    border-bottom: 1px solid #e5e5e5;

    .el-dialog__title {
      width: 64px;
      height: 16px;
      font-size: 16px;
      font-weight: bold;
      color: #27475f;
    }
  }

  .content {
    width: 100%;
    height: 100%;
    .query-content {
      margin-bottom: 15px;
    }
  }
  .el-dialog__body {
    padding-top: 20px;
  }

  .el-form {
    .el-form-item {
      margin-bottom: 0;

      .resetButton {
        width: 80px;
        height: 32px;
        color: #28b1e4;
        background: #ffffff;
        border: 1px solid #28b1e4;
        border-radius: 2px;
      }

      .queryButton {
        width: 80px;
        height: 32px;
        background: #28b1e4;
        border-radius: 2px;
      }
    }
  }

  .el-pagination {
    margin-top: 25px;
    justify-content: end;
    margin-right: 18px;
  }
}
</style>
